<template>
  <div class="roll-weight-input">
    <el-input-number
      v-model="inputValue"
      :min="50"
      :placeholder="placeholder"
      style="width: 100%"
      @change="handleInputChange"
    />
    <div class="quick-options">
      <el-button
        v-for="option in quickOptions"
        :key="option.value"
        :type="inputValue === option.value ? 'primary' : 'default'"
        size="small"
        @click="selectQuickOption(option.value)"
      >
        {{ option.label }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

defineOptions({
  name: "RollWeightInput",
  inheritAttrs: false,
});

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0,
  },
  placeholder: {
    type: String,
    default: "重量(kg)",
  },
});

const emit = defineEmits(["update:modelValue"]);

// 内部值
const inputValue = ref(props.modelValue);

// 快捷选项
const quickOptions = ref([
  { value: 50, label: "50" },
  { value: 100, label: "100" },
  { value: 200, label: "200" },
  { value: 300, label: "300" },
  { value: 500, label: "500" },
  { value: 1000, label: "1000" },
  { value: 2000, label: "2000" },
]);

// 监听外部值变化
watch(
  () => props.modelValue,
  (newVal) => {
    inputValue.value = newVal;
  }
);

// 监听内部值变化
watch(inputValue, (newVal) => {
  emit("update:modelValue", newVal);
});

// 输入框变化处理
function handleInputChange(value) {
  emit("update:modelValue", value);
}

// 选择快捷选项
function selectQuickOption(value) {
  inputValue.value = value;
  emit("update:modelValue", value);
}
</script>

<style scoped lang="scss">
.roll-weight-input {
  .quick-options {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;

    .el-button {
      height: 24px;
      padding: 0 4px;
      font-size: 12px;
      margin-left: 2px;
    }
  }
}
</style>
